import React,{Component} from 'react';
import {Link} from 'react-router-dom'



import {Menu,Dropdown,Input  } from 'antd'
import { DownOutlined } from '@ant-design/icons';

import {BugFilled,CiCircleFilled,FrownFilled,SyncOutlined } from '@ant-design/icons';

import './navBar.less'
const { Search } = Input;



class NavBar extends Component {
    constructor(props){
        super(props)
        this.state={
            visible: false,
        }
    }
    handleMenuClick=e=>{
        if (e.key === '3') {
            this.setState({ visible: false });
            console.log(this.props,"pip")
            this.props.props.history.push('/login')
        }
    }
    handleVisibleChange=(flag)=>{
        this.setState({ visible: flag });
    }
    render(){
        const {props}=this.props;
        const routerUrl=props.match.path
        const menu = (
            <Menu onClick={this.handleMenuClick}>
              <Menu.Item key="1">上传头像</Menu.Item>
              <Menu.Item key="2">修改密码</Menu.Item>
              <Menu.Item key="3">退出登陆</Menu.Item>
            </Menu>
          );
        return(
            <div  className="router-link-head">
                {
                    routerUrl==="/home" && (<Search className="tn-search-header-input"
                    placeholder="输入股票代码"
                    onSearch={value => console.log(value)}
                    />)
                }
                 <Link  className={routerUrl==="/home"?"main-view-content active":"main-view-content"}    to="/home" >
                     <BugFilled />
                     <span  style={{marginLeft:10}}>交易中心</span>
                     </Link>
                 <Link  className={routerUrl==="/asset"?"asset-view-content active":"asset-view-content"} to="/asset">
                     <CiCircleFilled />
                     <span style={{marginLeft:10}}>我的资产</span>
                     </Link>
                <Dropdown
                    overlay={menu}
                    onVisibleChange={this.handleVisibleChange}
                    visible={this.state.visible}
                    className="tn-dropdown-menu"
                >
                    <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                    {/* <FrownFilled /> */}
                    <SyncOutlined spin />
                     1884390349 <DownOutlined />
                    </a>
                </Dropdown>
            </div>
        )
    }
}


export default NavBar;